import React, {useRef, useState} from 'react';
import {ModalForm} from "@ant-design/pro-form";
import type {ProFormInstance} from "@ant-design/pro-form";
import { ProFormMoney, ProFormText} from "@ant-design/pro-form";
import dayjs from "dayjs";
import type {PaymentLogItem} from "@/pages/PaymentLogs/data";
import {DatePicker} from "antd-mobile";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<PaymentLogItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  modalVisible: boolean;
  values: Partial<PaymentLogItem>;
};

const RefundForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();

  // 移动端日期选择器
  const [timePickerVisible, setTimePickerVisible] = useState<boolean>(false)

  return (
    <ModalForm
      title={"退款登记"}
      visible={props.modalVisible}
      width={400}
      formRef={formRef}
      // Drawer抽屉需要关联上层UpdateForm的点击管理函数
      onFinish={props.onSubmit}
      modalProps={{
        destroyOnClose: true,
        // 抽屉层关闭函数， 需要关联上层的onCancel函数
        onCancel: function (){
          props.onCancel()
        },
      }}
    >
      <ProFormMoney
        name={"refundMoney"}
        label={"退款金额"}
        placeholder={"0.00"}
        initialValue={props.values.refund}
        rules={[{required:true, message:'金额必填！'}]}
      />
      <ProFormText
        hidden
        name={"refundTime"}
      />
      <ProFormText
        label={"时间"}
        name={"timeStr"}
        initialValue={`${dayjs(props.values.time).format("YYYY-MM-DD HH:mm")}`}
        fieldProps={{
          onClick: ()=>{
            setTimePickerVisible(true)
          }
        }}
      />
      <DatePicker
        visible={timePickerVisible}
        precision='minute'
        onCancel={()=>{
          setTimePickerVisible(false)
        }}
        onConfirm={(val)=>{
          formRef.current?.setFieldsValue({
            refundTime: dayjs(val).utc().format(),
            timeStr: dayjs(val).format("YYYY-MM-DD HH:mm")
          })
          setTimePickerVisible(false)
        }}
      />
      <ProFormText
        name={"remark"}
        label={"备注"}
        initialValue={props.values.remark}
        placeholder={"请输入备注"}
      />
    </ModalForm>
  );
};

export default RefundForm;
